.trends-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;

    .trends-branch-filter {
        max-width: 300px;
        margin-bottom: 2em;
    }

    .trends-table {
        display: flex;
        flex-wrap: wrap;
    }

    .trends-chart-container {
        max-width: 375px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1em;
    }

    .trends-chart-label {
        margin-bottom: 0.5em;
    }

    .recharts-legend-item-text {
        text-transform: lowercase;
    }
}

// layout kludges
// need to address weird empty space on left side of recharts

.trends-view {
    .trends-chart-label {
        margin-left: 40px; // center label
    }

    .recharts-legend-wrapper {
        left: 45px !important; // center legend, default is 5, add 40
    }
}

